<template>
	<section class="page_box">
		<div class="table_head" ><el-tag type="danger" v-if="tableData.length">{{tableName[tableIndex]}}</el-tag></div>
		<el-checkbox-group  ref="checkbox_group" v-model="selectRowNum"  @change='handleCheckedCitiesChange' class="checkbox_group">
            <el-table v-if="tableData.length" height="100%" :data="tableData" border class="table_box" style="width: 100%">
                <el-table-column  v-for="(item, i) in tabelArray" :key="i" :prop="item.prop" :label="item.label" min-width='180'>
                    <template slot="header" slot-scope="scope">
                        <!-- {{scope.column.property}} -->
                        <el-checkbox :label="scope.column.property">
                            <el-tag >{{scope.column.label}}</el-tag>
                        </el-checkbox>
                        <span v-if="sortName === scope.column.property" class="table_icon" >
                            <i @click="sortRow('descend')" :class="{'active': sortType === 'descend'}"></i>
                            <i @click="sortRow('ascend')" :class="{'active': sortType === 'ascend'}"></i>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </el-checkbox-group>
        <div class="page_bar" v-if="tableData.length" >
            <el-pagination background  layout="prev, pager, next" :page-size="tableData.length" @current-change="getPage" @prev-click="getPage" @next-click="getPage" :current-page="page" :page-count="tableNum" :total="tableNum * tableData.length"></el-pagination>
            <el-tag type="success">当前页：{{tableData.length}} 条</el-tag>
        </div>
	</section>
</template>

<script>
	export default {
		name: 'Table',
		title: '表格',
		props: {
			tableName: [Array, Object],						// 表格名称
			tableIndex: [String, Number],					// 表格索引
			tableHead: [Array, Object],						// 表头数据
			tableData: [Array],								// 表格数据
			tableAllData: [Array],							// 表格全部数据
			rowsArray: [Array],								// 表头行字段
			getSortData: [Function],						// 排序数据
			sortName: [String],								// 排序字段
			sortType: [String, Boolean, Number],			// 排序类型
		},
		computed: {
			// 表格数量
			tableNum() {
				return this.tableAllData.length
			},
			// 表头类型
	        tabelArray() {
	            return this.getTableType()
	        },
	        // 页数
	        page() {
	        	return this.tableIndex + 1
	        }
		},
		watch: {
			// 监听选择的个数	
			rowsArray() {
				this.selectRowNum = this.rowsArray
			}

		},
		methods: {
			// 生成表格数据类型
	        getTableType() {
	            let array = []
	            for(let key in this.tableHead) {
	                array.push({
	                    prop: key,
	                    label: this.tableHead[key]
	                })
	            }
	            return array
	        },
			// 获取当前页
	        getPage(page) {
	            let tableIndex = page - 1
	            let tableData = this.tableAllData[tableIndex]
	            // 向父组件传值
	            this.$emit('parentData', {
	            	tableIndex,
	            	tableData,				
	            })
	        },
	        // 单选
	        handleCheckedCitiesChange(value) {
	            // 向父组件传值
	            this.$emit('parentData', {
	            	rowsArray: value,
	            	sortName: null,					// 取消排序按钮
	            })
	        },
	        // 排序
	        sortRow(type) {
	        	let sortType = type || "ascend"
                let tableData = this.getSortData(this.tableData, sortType)

                // 向父组件传值
				this.$emit('parentData',{
					tableData,
					sortType,
				})	
	        }
		},
		data() {
			return {
				selectRowNum: []			// 选择的字段
			}
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped >
	.page_box{		
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.checkbox_group{
	        width: 100%;
	        height: 100%;
	        flex: 1;
	        padding-top: 20px;
	        box-sizing: border-box;
	        overflow: hidden;
	    }
	    .table_head{
	        margin-top: 20px;
	        width:100%;
	        height: 32px;
	        text-align: center;
	    }
	    .table_box{
	    	width: 100%;
        	height: 100%;
        	.table_icon{
        		font-size: 20px;
		        cursor: pointer;
		        margin-left: 5px;
		        position: relative;
        		i{
					position: absolute;
			        left: 0;
			        border: solid 6px transparent;
			        &:nth-child(1){
				        top:0;
				        border-bottom-color: #909399;
				        margin-top: 4px;
				        &.active{
					        border-bottom-color: #409EFF;
					    }
				    }
				    &:nth-child(2){
				        bottom: 0;
				        border-top-color: #909399;
				        margin-bottom: -6px;
				        &.active{
					        border-top-color: #409EFF;
					    }
				    }
        		}
        	}
	    }
	    .page_bar{
	        width: 100%;
	        height: 50px;
	        display: flex;
	        align-items: center;
	    }
	}
</style>
